<template>
  <view class="page">
    <!-- 实验目的 -->
    <view class="aim">
      <view class="aim-wrapper">
        <view class="aim-wrapper-title">实验目的 - 增加挂果率</view>
        <view class="aim-wrapper-line"></view>
        <view class="aim-wrapper-text">【试验地块】：{{ "自填的文案" }}</view>
        <view class="aim-wrapper-text">【试验对象】：{{ "橘子" }}</view>
      </view>
    </view>
    <!-- 实验过程-->
    <view class="process">
      <view class="process-title">
        <u-icon name="minus" color="#f6f6f6"></u-icon>
        <view style="margin: 0 30rpx; color: #000">病虫害防治</view>
        <u-icon name="minus" color="#f6f6f6"></u-icon>
      </view>
      <view class="step">
        <view class="step-item" v-for="(item, index) in 2" :key="index">
          <view class="dot">
            <view class="dot1"></view>
          </view>
          <view class="line"></view>
          <view class="step-item-desc">
            <view class="step-item-text">今天 11：30</view>
            <view class="step-item-text2">24~39 晴</view>
          </view>
          <view class="step-item-desc">
            <view
              class="step-item-text2"
              style="color: #4fb718; font-weight: bold"
              >药肥记录</view
            >
            <view class="step-item-text2">花芽分化期</view>
          </view>
          <view class="step-item-main">
            <view class="step-item-content">
              <view class="title">病虫害防治</view>
              <view class="item-content">
                <view style="color: #999; margin-bottom: 5rpx">
                  · 防治的害虫病</view
                >
                <view style="color: #000">
                  红蜘蛛 \ 黄蜘蛛 \ 黄蜘蛛 \ 黄蜘蛛 \ 黄蜘蛛 \ 黄蜘蛛 \ 黄蜘蛛 \
                  黄蜘蛛 \ 黄蜘蛛</view
                >
              </view>
              <view class="item-content">
                <view style="color: #999; margin-bottom: 5rpx">
                  · 防治的害虫病</view
                >
                <view style="color: #000">
                  测试（10.00kg） \ 测试（10.00kg） \ 测试（10.00kg） \
                  测试（10.00kg） \ 测试（10.00kg） \ 测试（10.00kg） \
                  测试（10.00kg） \ 测试（10.00kg）</view
                >
              </view>
            </view>
            <view class="item-info">
              <view style="margin-right: 45rpx">兑水量：10.00斤</view>
              <view>亩数：1亩</view>
            </view>
          </view>
          <view class="step-item-btns">
            <view style="display: flex; align-items: center">
              <view
                @click="onDelStep"
                class="step-item-btn"
                style="margin-right: 30rpx"
                >删除</view
              >
              <view
                @click="gotoPage('/pages/experiment/add-record-result')"
                class="step-item-btn"
                >修改</view
              >
            </view>
            <view
              @click="gotoPage('/pages/experiment/effect')"
              class="step-item-btn"
              style="
                border-color: #4fb718;
                color: #4fb718;
                display: flex;
                align-items: center;
              "
            >
              <u-icon
                name="plus"
                color="#4fb718"
                size="12"
                style="margin-right: 12rpx"
              ></u-icon
              >效果跟踪</view
            >
          </view>
        </view>
      </view>
    </view>
    <u-modal
      :show="show"
      content=""
      showCancelButton
      @confirm="onModalconfirm"
      @cancel="show = false"
    >
      <view style="text-align: center; padding: 30rpx 0">确认删除本条记录</view>
    </u-modal>
    <view class="btn-box">
      <button
        @click="gotoPage('/pages/experiment/add-record')"
        class="btn"
        style="background-color: #1ac678"
      >
        <u-icon
          name="plus"
          color="#fff"
          size="20"
          style="margin-right: 12rpx"
        ></u-icon>
        <text class="btn-text" style="color: #fff">药肥记录</text>
      </button>
      <button
        @click="gotoPage('/pages/experiment/add-operat')"
        class="btn"
        style="background-color: #2b6952"
      >
        <u-icon
          name="plus"
          color="#fff"
          size="20"
          style="margin-right: 12rpx"
        ></u-icon>
        <text class="btn-text" style="color: #fff">农事操作</text>
      </button>
    </view>
  </view>
</template>

<script>
import uUpload from "@/components/upload.vue";
export default {
  components: {
    uUpload,
  },
  data() {
    return {
      show: false,
      operatTags: [
        { name: "以达成", change: false },
        { name: "效果不显著", change: false },
        { name: "未达成", change: false },
      ],
      fileList1: [],
    };
  },
  onLoad() {},
  mounted() {},
  computed: {},
  methods: {
    gotoPage(value) {
      this.$u.route({
        url: value,
      });
    },
    onDelStep(value) {
      this.show = true;
    },
    onModalconfirm() {
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding-top: 20rpx;
  min-height: 100vh;
  background: #f6f6f6;
  padding-bottom: 150rpx;
}
.aim {
  padding: 20rpx 35rpx;
  .aim-wrapper {
    width: 100%;
    border-radius: 10rpx;
    background-color: #fff;
    padding: 35rpx 30rpx 0;
    overflow: hidden;
    &-title {
      font-weight: bold;
      color: #1ac678;
    }
    &-line {
      width: 50rpx;
      height: 10rpx;
      background: #f6f6f6;
      margin: 20rpx 0;
    }
    &-text {
      font-size: 23rpx;
      margin-bottom: 20rpx;
    }
  }
}

.process {
  background: #fff;
  margin-bottom: 20rpx;
  &-title {
    font-size: 20rpx;
    padding: 20rpx 0;
    color: #999;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .step {
    padding: 0 30rpx;
    overflow: hidden;
    &-item {
      width: 100%;
      min-height: 300rpx;
      padding-left: 30rpx;
      padding-bottom: 30rpx;
      // border-left: 1px solid #e9e9e9;
      position: relative;
      .dot {
        position: absolute;
        top: 10rpx;
        left: -10rpx;
        z-index: 10;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #d2e7c0;
        display: flex;
        justify-content: center;
        align-items: center;
        .dot1 {
          width: 10rpx;
          height: 10rpx;
          border-radius: 50%;
          background: #1ac678;
        }
      }
      .line {
        position: absolute;
        top: 20rpx;
        left: 0;
        z-index: 9;
        width: 1px;
        height: 100%;
        background-color: #e9e9e9;
      }
      &-desc {
        display: flex;
        justify-content: space-between;
      }
      &-text {
        font-size: 22rpx;
        font-weight: bold;
      }
      &-text2 {
        font-size: 20rpx;
        color: #999;
      }
      &-main {
        width: 100%;
        min-height: 300rpx;
        background: #f6f6f6;
        border-radius: 10rpx;
        padding: 30rpx;
        margin-top: 20rpx;
      }
      &-content {
        width: 100%;
        background: #fff;
        font-size: 22rpx;
        padding: 20rpx 0;
        .title {
          font-weight: bold;
          padding: 0 30rpx;
          border-left: 5rpx solid #1ac678;
          margin-bottom: 30rpx;
        }
        .item-content {
          margin-bottom: 30rpx;
          padding: 0 30rpx;
        }
      }
      .item-info {
        width: 100%;
        display: flex;
        background: #fff;
        margin-top: 20rpx;
        font-weight: bold;
        font-size: 22rpx;
        padding: 10rpx;
      }
      &-btns {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0;
      }
      &-btn {
        padding: 8rpx 20rpx;
        border: 1px solid #e9e9e9;
        font-size: 22rpx;
      }
    }
  }
}

.btn-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 100%;
  border-radius: 0rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
